<template>
  <div class="flex flex-wrap gap-4" >
    <el-breadcrumb style="margin-bottom: 20px;">
    <el-breadcrumb-item><b>数据筛选</b></el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 搜索信息 -->
    <el-card style="width: 1800px" shadow="always">
      <el-button type="success" plain @click="dialogFormVisible = true" style="margin-bottom: 25px;">高级搜索</el-button>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="退货单号">
      <el-input v-model="formInline.user" placeholder="请输入/扫描单号" clearable />
      </el-form-item>

      <el-form-item label="销售单号">
      <el-input v-model="formInline.user" placeholder="请输入/扫描单号" clearable />
      </el-form-item>

      <el-form-item label="产品名称">
      <el-input v-model="formInline.user" placeholder="请输入/扫描单号" clearable />
      </el-form-item>

      <el-form-item label="订单状态">
      <el-select
      v-model="formInline.region"
      placeholder="请选择"
      clearable
      >
      <el-option label="待审核" value="待审核" />
      <el-option label="审核成功" value="审核成功" />
      <el-option label="审核失败" value="审核失败" />
      </el-select>
      </el-form-item>

      <el-form-item>
      <el-button type="primary" @click="onSubmit">搜索</el-button>
      <el-button  @click="onSubmit">重置</el-button>
      </el-form-item>
      </el-form>
    </el-card>
  </div>

  <!-- 数据显示信息 -->
  <div class="flex flex-wrap gap-4" style="margin-top: 20px;">
    <!-- <el-button type="success">+新增</el-button>
    <el-button type="warning" @click="route.path='PurchAddShow'">编辑</el-button> -->
    <el-button type="danger" @click="route.path='PurchAddShow'">删除</el-button>
    <el-button type="info" @click="route.path='PurchAddShow'">刷新</el-button>
    <el-button type="primary" >导出</el-button>
    <el-card style="width: 1800px" shadow="always">
        <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="退货单号" width="80" />
        <el-table-column prop="date" label="产品名称" width="80" />
        <el-table-column prop="date" label="产品编号" width="80" />
        <el-table-column prop="date" label="产品规格" width="80" />
        <el-table-column prop="date" label="单位" width="80" />
        <el-table-column prop="date" label="单价" width="80" />
        <el-table-column prop="date" label="数量" width="80" />
        <el-table-column prop="date" label="总额" width="80" />
        <el-table-column prop="date" label="销售单号" width="80" />
        <!-- <el-table-column prop="date" label="客户单号" width="80" />
        <el-table-column prop="name" label="客户编号" width="80" /> -->
        <el-table-column prop="date" label="客户名称" width="80" />
        <el-table-column prop="name" label="状态" width="80" />
        <el-table-column prop="name" label="创建时间" width="80" />
        <el-table-column prop="address" label="操作" >
            <template v-slot="scoped">
                <el-button type="primary">查看</el-button>
                <el-button type="primary">确认</el-button>
            </template>
        </el-table-column>
        </el-table>
    </el-card>
  </div>

  <!-- 高级搜索弹出框 -->
  <el-dialog v-model="dialogFormVisible" title="高级搜索" width="500">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="退货单号">
    <el-input v-model="formInline.user"  clearable />
    </el-form-item>

    <el-form-item label="销售单号">
    <el-input v-model="formInline.user"  clearable />
    </el-form-item>

    <el-form-item label="产品编号">
    <el-input v-model="formInline.user"  clearable />
    </el-form-item>

    <el-form-item label="产品名称">
    <el-input v-model="formInline.user" clearable />
    </el-form-item>

    <el-form-item label="客户编号">
    <el-input v-model="formInline.user"  clearable />
    </el-form-item>

    <el-form-item label="客户名称">
    <el-input v-model="formInline.user" clearable />
    </el-form-item>


    <el-form-item label="起始时间">
    <el-date-picker
    v-model="formInline.date"
    type="date"
    placeholder="Pick a date"
    clearable
    />
    </el-form-item>
    <el-form-item>
    <el-button type="primary" @click="onSubmit">Query</el-button>
    </el-form-item>
    </el-form>
    <!-- <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          Confirm
        </el-button>
      </div>
    </template> -->
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import { statementRed } from '@/http/axiosHelper'
const router = useRouter();
const route = useRoute();

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
    {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
    {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

//高级搜索弹出框
const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

//条件查询
const formInline = reactive({
  user: '',
  region: '',
  date: '',
})



const onSubmit = () => {
  console.log('submit!')
}
</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
b{
  color: black;
}
</style>